/**
 * 画布协议
 * 
 * 该协议定义了画布与组件的交互方式，包括拖放、选择、调整大小等操作。
 */

import type { Component } from '@/types';

/**
 * 拖放事件数据
 */
export interface DropData {
  type: string;           // 拖放项类型
  componentType?: string; // 组件类型（用于从物料面板拖放）
  componentId?: string;   // 组件ID（用于画布内拖动）
  sourcePosition?: {      // 拖动源位置
    x: number;
    y: number;
  };
  sourceIndex?: number;   // 拖动源索引
}

/**
 * 拖放位置数据
 */
export interface DropPosition {
  x: number;              // 拖放位置X坐标
  y: number;              // 拖放位置Y坐标
  gridX: number;          // 网格X坐标
  gridY: number;          // 网格Y坐标
}

/**
 * 组件拖放结果
 */
export interface DropResult {
  id: string;             // 组件ID
  position: {             // 组件位置
    x: number;
    y: number;
  };
}

/**
 * 画布网格配置
 */
export interface GridConfig {
  cols: number;           // 列数
  rowHeight: number;      // 行高（像素）
  margin: [number, number]; // 元素间距 [水平, 垂直]
  containerPadding: [number, number]; // 容器内边距 [水平, 垂直]
  isDraggable: boolean;   // 是否允许拖动
  isResizable: boolean;   // 是否允许调整大小
  compactType: 'vertical' | 'horizontal' | null; // 紧凑类型
}

/**
 * 布局项类型
 */
export interface LayoutItem {
  i: string;              // 元素ID
  x: number;              // X坐标
  y: number;              // Y坐标
  w: number;              // 宽度
  h: number;              // 高度
  minW?: number;          // 最小宽度
  minH?: number;          // 最小高度
  maxW?: number;          // 最大宽度
  maxH?: number;          // 最大高度
  static?: boolean;       // 是否静态
  isDraggable?: boolean;  // 是否可拖动
  isResizable?: boolean;  // 是否可调整大小
}

/**
 * 画布事件回调
 */
export interface CanvasEvents {
  onDrop: (data: DropData, position: DropPosition) => DropResult; // 拖放回调
  onLayoutChange: (layout: LayoutItem[]) => void; // 布局变更回调
  onComponentSelect: (id: string | null) => void; // 组件选择回调
  onComponentResize: (id: string, size: { w: number, h: number }) => void; // 组件大小调整回调
  onComponentMove: (id: string, position: { x: number, y: number }) => void; // 组件移动回调
}

/**
 * 画布状态
 */
export interface CanvasState {
  selectedComponentId: string | null; // 当前选中的组件ID
  hoveredComponentId: string | null;  // 当前悬停的组件ID
  isDragging: boolean;                // 是否正在拖动中
  isResizing: boolean;                // 是否正在调整大小
}

/**
 * 画布渲染上下文
 */
export interface CanvasContext {
  components: Component[];           // 当前页面的组件
  gridConfig: GridConfig;            // 网格配置
  events: CanvasEvents;              // 事件回调
  state: CanvasState;                // 画布状态
}

/**
 * 缩放级别配置
 */
export interface ZoomConfig {
  value: number;                     // 缩放值，1为100%
  min: number;                       // 最小缩放值
  max: number;                       // 最大缩放值
  step: number;                      // 缩放步长
}

/**
 * 画布辅助功能
 */
export interface CanvasHelpers {
  showGrid: boolean;                // 是否显示网格线
  snapToGrid: boolean;              // 是否吸附到网格
  showRulers: boolean;              // 是否显示标尺
  showOutlines: boolean;            // 是否显示组件轮廓
  zoom: ZoomConfig;                 // 缩放配置
}

/**
 * 选择框操作
 */
export interface SelectionBox {
  start: { x: number, y: number };  // 选择框起始位置
  end: { x: number, y: number };    // 选择框结束位置
  isActive: boolean;                // 是否激活
  selectedComponentIds: string[];   // 选中的组件ID列表
}

/**
 * 画布尺寸
 */
export interface CanvasSize {
  width: number;                    // 画布宽度
  height: number;                   // 画布高度
  autoHeight?: boolean;             // 是否自动高度
} 